<template>
  <div>
    <div class="leftContent d-flex">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :wvalueth="480" :title="'数据管理'">
          <div class="mb-1">
            <p class="font-lan-gray-60">地图管理：</p>
            <el-row :gutter="16">
              <el-col :span="12">
                <coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
              </el-col>
              <el-col :span="12">
                <maptype />
              </el-col>
            </el-row>
          </div>
          <div class="mb-1">
            <p class="font-lan-gray-60">数据来源：</p>
            <scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'"
              :value="'id'" @change="acscaderChange"/>
          </div>
          <div>
            <p class="font-lan-gray-60">数据范围：</p>
            <scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="storage.state.area" :label="'name'"
              :value="'id'" @change="acscaderChange" />
          </div>
        </box>
        <box class="mb-3" :wvalueth="480" :title="'农业信息统计'">
          <decorate1 class="mb-2">
            <div class="d-flex">
              <div class="d-flex ai-center">
                <img :src="area" alt="">
                <span class="font-lan ml-3">耕地总面积：</span>
              </div>
              <div>
                <span class="font-num-l">{{data.agricultural.area?data.agricultural.area[0].number:'-'}}</span>
                <span class="font-lan">亩</span>
              </div>
            </div>
          </decorate1>
          <decorate2 class="mb-2" :title="'作物产量'" />
          <el-row :gutter="16">
            <el-col :span="12" v-for="(item, index) in data.agricultural.output" :key="index">
              <decorate1 class="mb-2">
                  <div class="d-flex ai-center">
                    <img class="agricultural mr-2" :src="item.icon?base_url+item.icon:yieldImg" alt="">
                    <div>
                      <p class="font-lan">{{ item.name }}</p>
                      <span class="font-num">{{ item.number == 0 ? '-': item.number }}</span>
                    </div>
                  </div>
              </decorate1>
            </el-col>
          </el-row>
          <decorate2 class="mb-2" :title="'作物产值'" />
          <el-row :gutter="16">
            <el-col :span="12" v-for="(item, index) in data.agricultural.production" :key="index">
              <div class="d-flex ai-center">
                <img class="agricultural mr-2" :src="item.icon?base_url+item.icon:outputImg" alt="">
                <div>
                  <p class="font-lan">{{ item.name }}</p>
                      <span class="font-num">{{ item.number == 0 ? '-': item.number }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </box>
      </el-scrollbar>
      <div class="icons ml-3">
        <div v-for="(item, index) in data.plantTypes" :key="index" class="iconInfo d-flex ai-center">
          <div class="icon" :style="{backgroundColor:item.background}"></div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :width="480" :title="'种植分布统计'">
          <decorate1 class="mb-3">
            <div class="d-flex">
              <div class="d-flex ai-center">
                <img :src="soillocation" alt="">
                <span class="font-lan ml-3">耕地总面积：</span>
              </div>
              <div>
                <span class="font-num-l">{{ data.plantTypes.reduce((prev, curr) => {
                  return prev +
                    parseFloat(curr.count)
                }, 0) }}</span>
                <span class="font-lan">亩</span>
              </div>
            </div>
          </decorate1>
          <div class="d-flex ai-center mb-2">
            <div class="echart mr-3">
              <pieB :data="{
                showTitle:false,
                color:data.plantTypes.map((item)=>item.background),
                list:data.plantTypes
              }" />
            </div>
            <el-row :gutter="12">
              <el-col :span="12" v-for="(item, index) in data.plantTypes" :key="index">
                <div class="d-flex ai-center jc-between mb-2">
                  <div>
                    <span class="chartIcon mr-2" :style="{ background: item.background }"></span>
                    <span class="font-lan">{{ item.name }}</span>
                  </div>
                  <div class="font-lan">{{ item.value }}%</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div>
            <div v-for="(item, index) in data.plantTypes" :key="index" class="d-flex ai-center mb-2">
              <img class="mr-2" :src="decorate2" alt="">
              <div class="flex-1 ">
                <div class="d-flex ai-center jc-between">
                  <div>
                    <span class="font-lan">{{item.name}}</span>
                  </div>
                  <div>
                    <span class="font-lan">{{item.count}}</span>
                    <span class="font-lan-gray-60-s">亩</span>
                  </div>
                </div>
                <div>
                  <el-progress :show-text="false"  :percentage="item.value"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </box>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import pieB from "@/chart/pieChart/pic-bole";
import { getCropColor, calculateCenter } from "@/utils/common";
import mapControler from "@/components/mapContainer/mapControler";
import storage from '@/store'
import { useRouter } from 'vue-router';
import Setting from '@/public/config'
import {
  agriculturalStatistics,
  plantStatistics,
  cropDetails
} from "@/public/request/http";
import moment from "moment";

export default defineComponent({
  components: {
    pieB,
    // pieChartM,
  },
  setup() {
    //变量
    // const maxHeight = ref(window.innerHeight-160+'px')
    const maxHeight = computed(() => window.innerHeight - 160 + 'px')
    const router = useRouter()
    const base_url = Setting.HttpApiAddress
    const data: any = reactive({
      coverage: [],
      select: null,
      pullDatas: [],
      pullData: [],
      cascader: [],
      adress: [],
      plantTypes: [],
      analysisItems: [
        { name: '棉花总产量', img: require('@/assets/img/cotton.png'), icon: require('@/assets/img/cotton_icon.png'), unit: '亩', count: 1205 },
        { name: '玉米总产量：', img: require('@/assets/img/maize.png'), icon: require('@/assets/img/maize_icon.png'), unit: '亩', count: 1205 },
        { name: '小麦总产量：', img: require('@/assets/img/wheat.png'), icon: require('@/assets/img/wheat_icon.png'), unit: '亩', count: 1205 },
        { name: '甜菜总产量：', img: require('@/assets/img/beet.png'), icon: require('@/assets/img/beet_icon.png'), unit: '亩', count: 1205 },
        { name: '蔬菜总产量：', img: require('@/assets/img/vegetable.png'), icon: require('@/assets/img/vegetable_icon.png'), unit: '亩', count: 1205 }],
      tags:[{name:'有机质',value:0},{name:'可溶性盐',value:0},{name:'酸碱度',value:0},{name:'有效磷',value:0},{name:'全效钾',value:0},],
      types: [
        { name: '一类', value: '60%', des: '1.5~2.0', count: 780 },
        { name: '二类', value: '10%', des: '1.25~1.5', count: 310 },
        { name: '三类', value: '30%', des: '1.0~1.25', count: 100 },
        { name: '四类', value: '30%', des: '0.5~1.0', count: 100 },
        { name: '五类', value: '30%', des: '0.0~0.5', count: 100 }],
      agricultural:{}
    });
    const tableData = ref([]);
    const searchData: any = reactive({
      personConfirmation: null,
      district: [],
      option1: 1,
      option2: 1,
    });
    const farmland = require("@/assets/img/farmland.png");
    const area = require("@/assets/img/area.png");
    const decorate2 = require("@/assets/img/decorate2.png");
    const soillocation = require("@/assets/img/soillocation.png")
    const active = ref(0)
    const yieldImg = require("@/assets/img/yield.png");
    const outputImg = require("@/assets/img/output.png")

    // 生命周期
    onMounted(async () => {
      //
      
      data.pullDatas = [storage.state.dataSources[router.currentRoute.value.meta.index.toString()]]
      mapControler.mapReSet();
      getAgriculturalStatistics()
      getPlantStatistics()
      getCropDetails()
    });

    onUnmounted(() => {
      //
      mapControler.mapReSet();
      
    });

    //methods

    const getAgriculturalStatistics = async () => {
      try {
        let res = await agriculturalStatistics(
          {
            batchId:data.pullData.length>0?data.pullData[data.pullData.length - 1].id:null,
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        data.agricultural = res
      } catch (error) {
        return
      }
    };

    const getPlantStatistics = async () => {
      try {
        let res = await plantStatistics(
          {
            batchId:data.pullData.length>0?data.pullData[data.pullData.length - 1].id:null,
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        data.plantTypes = res.map(item=>{
          return {
            name:getCropColor(item.type).name,
            background:getCropColor(item.type).color,
            value:parseFloat(item.ratio)*100,
            count:item.sumArea
          }
        })
      } catch (error) {
        return
      }
    };


    const getCropDetails = async () => {
      try {
        let res = await cropDetails(
          {
            batchId:data.pullData.length>0?data.pullData[data.pullData.length - 1].id:null,
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        res.forEach((item) => {
          item.cropType = item.type
          item.type = "作物分布"
          item.pointList = JSON.parse(item.points).map(item1=>{return {lng:item1.lon,lat:item1.lat}})
          item.cropName = getCropColor(item.cropType).name
          item.fillColor = getCropColor(item.cropType).color
          item.fillOpacity = 0.6
          mapControler.drawArea(item);
        });
      } catch (error) {
        return
      }
    };
    cropDetails

    const tagsChange = (item,index)=>{
      active.value = index
    }

    const slecetChange = (e) => {
      console.log(e);

    }

    const acscaderChange = (e) => {
      getAgriculturalStatistics()
      getPlantStatistics()
      getCropDetails()
    }


    // return
    return {
      data,
      area,
      decorate2,
      farmland,
      tableData,
      searchData,
      slecetChange,
      acscaderChange,
      moment,
      maxHeight,
      soillocation,
      active,
      tagsChange,
      storage,
      yieldImg,
      outputImg,
      base_url
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.chartIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #93F5E1;
    border-radius: 2px 2px 2px 2px;
  }

.tag{
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(82,147,204,0.3) 0%, #5293CC 47%, rgba(82,147,204,0.3) 100%);
  box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.16);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 0.3), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0.3)) 1 1;
}
.active{
  position: relative;
  background: linear-gradient(351deg, #CCA352 0%, #F5D493 100%);
  border-radius: 2px 2px 2px 2px;
  border-image: linear-gradient(270deg, rgba(245, 212, 147, 1), rgba(255, 235, 153, 1)) 1 1;
}
.active::before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
  background: rgba(245,196,98,0.6);
}
.active::after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: rgba(245,196,98,0.6);
}
.text-shadow{
  text-shadow: 0px 2px 4px rgba(0,0,0,0.16);
}
.agricultural{
  width: 36px;
  height: 36px;
}
</style>
